<template>
  <MyDialog title="压测结果" :visible="dialogVisible" @ok="close" @close="close">
    <div class="box">
      <div v-for="(item, index) in result" :key="index" class="box-item">
        <div class="item">
          <div class="item-label">
            测试类型：
          </div>
          <div class="item-value">
            {{ item.type == 'drop' ? '丢包测试' : '极限测试' }}
          </div>
        </div>
        <div class="item">
          <div class="item-label">
            压测最大：
          </div>
          <div class="item-value">
            {{ item.maxTestBandwidth }}
          </div>
        </div>
        <div class="item">
          <div class="item-label">
            压测平均：
          </div>
          <div class="item-value">
            {{ item.avgTestBandwidth }}
          </div>
        </div>
        <div class="item">
          <div class="item-label">
            TCP重传率：
          </div>
          <div class="item-value">
            {{ item.tcpRetransmissionRatio }}
          </div>
        </div>
        <div class="item">
          <div class="item-label">
            测试时间：
          </div>
          <div class="item-value">
            {{ item.upBandwidthTestTime }}
          </div>
        </div>
        <div class="item">
          <div class="item-label">
            测试用时(秒)：
          </div>
          <div class="item-value">
            {{ item.duration }}
          </div>
        </div>
        <div class="item">
          <el-table :data="item.lineQuality" size="mini" border style="width: 100%">
            <el-table-column prop="name" label="线路">
            </el-table-column>
            <el-table-column prop="avgUpBandwidth" label="平均速率(M)">
            </el-table-column>
            <el-table-column prop="ip" label="公网ip">
            </el-table-column>
            <el-table-column prop="account" label="PPP账号">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div v-show="!result">
        <p>暂无数据</p>
      </div>
    </div>
  </MyDialog>
</template>
<script>
import { pressureTestResult } from "@/api/deviceManage";
import dialogMixin from "@/mixins/dialogMixin";
export default {
  mixins: [dialogMixin],
  props: {
    sn: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      dialogVisible: true,
      result: []
    };
  },

  mounted() {
    this.pressureTestResultReq()
  },
  methods: {
    pressureTestResultReq() {
      pressureTestResult(this.sn).then((res) => {
        console.log(res);
        this.result = res.data;
        this.dialogVisible = true;
      }).catch(err => {
        console.log(err)
      })
    },
  }
};
</script>
<style  lang="scss" scoped>
.box {
  line-height: 36px;
  font-size: 14px;
  display: flex;
  width: 100%;
  justify-content: space-around;
  flex-wrap: wrap;
}
.box-item {
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.item {
  display: flex;
}
.item-label {
  width: 110px;
}
.item-value {
  width: 200px;
}
</style>
